<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#262f24"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <ImageryLayer index="1" />
    <TerrainProvider index="2" />
    <Tiles3D index="3" />
    <Camera index="4" />
    <Conversion index="5" />
    <Entity index="6" />
    <Event index="7" />
    <PickStyle index="8" />
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import ImageryLayer from './components/ImageryLayer.vue'
import TerrainProvider from './components/TerrainProvider.vue'
import Tiles3D from './components/Tiles3D.vue'
import Camera from './components/Camera.vue'
import Conversion from './components/Conversion.vue'
import Entity from './components/Entity.vue'
import Event from './components/Event.vue'
import PickStyle from './components/PickStyle.vue'
const activeIndex = ref('1')
</script>

<style lang="scss" scoped>
.el-menu--horizontal {
  --el-menu-horizontal-height: 80px;
}
</style>
